<template>
  <div>
    <el-container>
      <el-aside width="400px" style="color: white">
        <img :src="url" height="300" width="400">

      </el-aside>
      <el-container >
        <el-header>
          <div style="float: left;font-size: 20px">
            <el-breadcrumb style="margin-top: 20px;height: 50px" separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/st_course' }">分类</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/st_course' }">{{form.type}}</el-breadcrumb-item>
              <el-breadcrumb-item>{{form.lessonname}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>

        </el-header>
        <el-header>
          <div style="float: left;font-size: 50px">
            {{form.lessonname}}
          </div>

        </el-header>
        <el-main>
          <el-container>
          <el-header style="float: left">
            <div style="float: left">
              讲师：{{form.teachername}}
            </div>

          </el-header>
          <el-main>
            <div style="float: left ;font-size: 15px; line-height:20px">
              简介:{{form.info}}
            </div>
            <div style="float: right ;font-size: 15px; line-height:20px">
               <el-button type="success" v-if="dis" @click="joinlesson()"  >加入课程</el-button>
               <el-button type="success" v-if="!dis"  @click="gostudy()" >开始学习</el-button>
            </div>

          </el-main>
            <el-footer >
            
            </el-footer>
          </el-container>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
    export default {
        name: 'CourseDetails',
        data () {
            return {
              dis:true,

                form: {
                    type:'',
                    lessonname:'',
                    teachername:'',
                    info:'',
                    photo:'',
                    id:''
                },

            }
        },
        created () {

            this.getLesson()
            //this.checkUser()

        },
        methods: {
             checkUser() {
               var _this = this
        this.$axios
          .post('/checkUser', {
            studentname:window.sessionStorage.getItem('username'),
           lessonid:window.sessionStorage.getItem('id')
          })
          .then(successResponse => {
            console.log(successResponse.data)
            if(successResponse.data.code===400)
            {
              _this.dis=false
              console.log(_this.dis)
            }
            else if(successResponse.data.code===200)
            {
              _this.dis=true
            }

          })
          .catch(failResponse => {
          })
      },


    getLesson() {
      console.log(window.sessionStorage.getItem('id'))
        this.$axios
          .post('/CourseDetails', {
           id:window.sessionStorage.getItem('id')
          })
          .then(successResponse => {
            //console.log(successResponse.data)
            this.form.type = successResponse.data.type
            this.form.lessonname = successResponse.data.lessonname
             this.form.teachername = successResponse.data.teachername
            this.form.info = successResponse.data.info
              this.form.photo = successResponse.data.photo
              this.form.id = successResponse.data.id
              this.checkUser()
          })
          .catch(failResponse => {
          })
      },
      joinlesson() {
        this.$axios
          .post('/joinlesson', {
            studentname:window.sessionStorage.getItem('username'),
            lessonid:window.sessionStorage.getItem('id')
          })
          .then(successResponse => {
            if(successResponse.data.code===400)
            {
              this.$message({
          message: '成功加入课程',
          type: 'success',

        })
        this.checkUser()
            }
            else{
              this.$message({
          message: '加入课程失败',
          type: 'warning'
        })
        this.checkUser()
            }


          })
          .catch(failResponse => {
          })
      },
          gostudy(){
               this.$router.replace('/playvideo')
          }
        }


}
</script>

<style scoped>.el-header, .el-footer {
  background-color: #fafafa;
  color: #090909;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #ffffff;
  color: #020202;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #ffffff;
  color: #0a0a0a;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}




</style>
